/* eslint quotes: 0 */
import React, {PureComponent} from "react";
import {
    Dimensions,
    StyleSheet,
    View,
    Text,
    Button,
    StatusBar,
    TouchableOpacity,
    Image,
    TextInput,
    FlatList,
    SafeAreaView,
    ToastAndroid,
    SectionList
} from "react-native";
import DetailTopTabBar from "../../widget/detail/DetailTopTabBar";
import {Heading1, Heading2, Heading3, Paragraph, Tip, Tip2, Tip3} from "../../widget/Text";
import {fetchGetRequest} from "../../api/NetworkTool";
import api from "../../api/api";
import method from "../../api/method";
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
import CornerLabel from 'react-native-smart-corner-label'
import SelectRebateCountDown from '../../widget/select/SelectRebateCountDown'
const temp = [{
    data: ['']
}];
export default class TeacherHomeScene extends PureComponent<> {

    //this.props.navigation.state.params.teacher_id

    static navigationOptions = ({navigation}: any) => ({
        headerTintColor: 'black',
        title: '老师主页',
        headerStyle: {backgroundColor: 'white'},
        headerRight: <Text/>,
        headerLeft: <TouchableOpacity onPress={()=>{
            navigation.goBack()
        }}>
            <Image style={{marginLeft:12}} source={require('../../../res/img/gobal_back.png')}/>
        </TouchableOpacity>
    })

    constructor(props) {
        super(props)
        this.state = {
            top_index: 0,
            dataArray: temp,
            name: '',//名字
            school: '',//毕业院校
            subject: '',//学科
            experience: '',//个人经历
            honor: '',//荣誉
            style: '',//风格
            shot_introduce: '',//自我评价
            image: '',//头像
            age: '',//教龄
            area: '',//校区
            courses: [],//课程
            common_course: [],//公开课程
            good_course: [],//精品课程
            text_height: 0,
        }
    }

    componentDidMount() {
        this.requestNetData(this.props.navigation.state.params.teacher_id)
    }

    requestNetData(id) {
        fetchGetRequest(api.teacherDetail, method.get, {teacherId: id})
            .then(res => {
                console.log(res)

                let detailData = res

                //过滤服务器返回的课程数据，当价格为0.00时为公开课，否则为精品课
                let common = []
                let good = []

                detailData.courses.map(function (item) {

                    if (item.price == '0.00') {
                        common.push(item)
                    } else {
                        good.push(item)
                    }

                });

                this.setState({
                    name: detailData.name,
                    school: detailData.school,
                    subject: detailData.subject,
                    experience: detailData.experience,
                    honor: detailData.honor,
                    style: detailData.style,
                    shot_introduce: detailData.shot_introduce,
                    image: detailData.image,
                    age: detailData.teacher_age,
                    area: detailData.area,
                    courses: detailData.courses,
                    common_course: common,
                    good_course: good,
                })


            })
            .catch(err => {

            })
    }

    _extraUniqueKey = (item) => {
        return "index" + item;
    };

    render() {

        return (
            <View style={ styles.container }>

                <SectionList
                    backgroundColor='#F9F9F9'
                    ref={(sectionList) => { this.sectionList = sectionList }}
                    keyExtractor={this._extraUniqueKey}
                    renderSectionHeader={(data) => this._renderSectionHeader()}
                    renderItem={(data) => this._renderItem(data)}
                    stickySectionHeadersEnabled={true}
                    sections={this.state.dataArray}
                    ListHeaderComponent={this.renderHeader}
                    ListFooterComponent={this.renderFooter}
                />

            </View>
        );
    }

    _renderItem() {
        return <View style={{marginBottom:19,marginRight:21,marginTop:12}}>
            <Text style={styles.rowTitle}>教师简介</Text>
            {/*<View style={styles.rowinfo}>*/}
            {/*<Text style={styles.rowContentLeft}>所在校区</Text>*/}
            {/*<Text style={styles.rowContentRight}>{this.state.area}</Text>*/}
            {/*</View>*/}
            {/*<View style={styles.rowinfo}>*/}
            {/*<Text style={styles.rowContentLeft}>所在学科</Text>*/}
            {/*<Text style={styles.rowContentRight}>{this.state.subject}</Text>*/}
            {/*</View>*/}
            {/*<View style={styles.rowinfo}>*/}
            {/*<Text style={styles.rowContentLeft}>毕业院校</Text>*/}
            {/*<Text style={styles.rowContentRight}>{this.state.school}</Text>*/}
            {/*</View>*/}
            {/*<View style={styles.rowinfo}>*/}
            {/*<Text style={styles.rowContentLeft}>教学经历</Text><Text*/}
            {/*style={styles.rowContentRight}>{this.state.experience}</Text></View>*/}
            {/*<View style={styles.rowinfo}>*/}
            {/*<Text style={styles.rowContentLeft}>所获荣誉</Text>*/}
            {/*<Text style={styles.rowContentRight}>{this.state.honor}</Text>*/}
            {/*</View>*/}
            {/*<View style={styles.rowinfo}>*/}
            {/*<Text style={styles.rowContentLeft}>授课风格</Text><Text*/}
            {/*style={styles.rowContentRight}>{this.state.style}</Text>*/}
            {/*</View>*/}
            <View style={styles.rowinfo}>
                {/*<Text style={styles.rowContentLeft}>教师简介</Text>*/}
                <Text
                    style={styles.rowContentCommentRight}>{this.state.shot_introduce == null ? '暂无内容' : this.state.shot_introduce}</Text>
            </View>
        </View>
    }

    /**
     * 顶部头像渲染
     * @returns {XML}
     */
    renderHeader = () => {

        return (

            <View style={styles.container }>
                <Image style={{width:width,height:170,position:'absolute',}}
                       source={require('../../../res/img/search/jiaoshi_bj.png')}/>
                <View style={{width:width,alignItems:'center',height:170}}>

                    <Image style={{width:60,height:60,marginTop:29,position:'absolute',borderRadius:30}}
                           source={{uri:this.state.image}}/>

                    <View style={{alignItems: 'center',justifyContent:'center'}}>
                        <Text
                            style={{fontSize:13,fontWeight:'bold',color:'rgba(0,0,0,0.8)',marginTop:100}}>{this.state.name}</Text>
                        <View style={{flexDirection:'row',marginTop:16}}>
                            <View style={{backgroundColor:'#DB3843',borderRadius:10}}>
                                <Text
                                    style={{fontSize:11,color:'white',marginLeft:13,marginRight:13,marginTop:3,marginBottom:3}}>{this.state.subject}</Text>
                            </View>
                            <View style={{backgroundColor:'#DB3843',borderRadius:10,marginLeft:15}}>
                                <Text
                                    style={{fontSize:11,color:'white',marginLeft:13,marginRight:13,marginTop:3,marginBottom:3}}>{this.state.age + '年教龄'}</Text>
                            </View>
                        </View>
                    </View>
                </View>

            </View>


        )
    }

    /**
     * 头部渲染
     * @returns {XML}
     */
    renderFooter = () => {
        return (
            <View>
                <Text style={styles.rowTitle}>在售课程</Text>

                {this.checkHeaderVisible()}

                <FlatList
                    numColumns={2}
                    data={this.state.common_course}
                    keyExtractor={(item, index) => index}
                    renderItem={this.renderTagItem}
                />

                {this.checkHeaderVisible2()}

                <FlatList
                    backgroundColor='#f9f9f9'
                    data={this.state.good_course}
                    keyExtractor={(item, index) => index}
                    renderItem={this.renderListItem}
                />
            </View>

        )
    }

    checkHeaderVisible() {
        if (this.state.common_course.length > 0) {
            return <Text style={styles.rowContentLeft2}>公开课</Text>
        } else {
            return <View>
            </View>
        }
    }

    checkHeaderVisible2() {
        if (this.state.good_course.length > 0) {
            return <Text style={styles.rowContentLeft3}>精品课</Text>
        } else {
            return <View>
            </View>
        }
    }

    layout = (e) => {
        console.log(e)
        this.setState({text_height: e.layout.width})
    }

    /**
     * 精品课列表Item
     * @param rowData
     * @returns {XML}
     */
    renderListItem = (rowData: any) => {
        let item = rowData.item;

        let master_teacher = item.teachers[0]
        let tutor_teacher = item.teachers[1]

        let start_time = item.start_date.substr(5, 5).replace('-', '月') + '日'
        let end_time = item.end_date.substr(5, 5).replace('-', '月') + '日'

        var showText = ''
        var show_txt = '仅剩'
        let ren = ''

        if (item.buys >= item.totals * 0.8 && item.buys < item.totals) {
            showText = item.remains
            show_txt = '仅剩'
            ren = '/' + item.totals + '人'
        } else if (item.buys >= item.totals) {
            show_txt = ''
            ren = ''
            showText = '已售罄'
        } else {
            showText = item.buys
            show_txt = '已报名'
            ren = '/' + item.totals + '人'
        }

        let mMount = item.amount == null ? 0 : parseInt(item.amount);
        let mPrice = item.price == null ? 0 : parseInt(item.price);

        return (
            <TouchableOpacity onPress={()=>this.goToGoodDetail(item)}>

                <View style={[styles.cell_container,{overflow: 'hidden'}]}>
                    <CornerLabel
                        alignment={'right'}
                        cornerRadius={36}
                        style={{backgroundColor: '#DB3843',}}
                        textStyle={{fontSize: 12, color: 'white',marginTop:8}}>
                        7.5折
                    </CornerLabel>
                    <View style={{flexDirection:'row',backgroundColor:'white',width:width-60}}>
                        <View style={{backgroundColor:'#db3843',borderRadius:2,padding:3,}}>
                            <Text style={{color:'#FFFFFF',fontWeight:'bold',fontSize:11,}}>{item.subject}</Text>
                        </View>
                        <View
                            style={{backgroundColor:'white',borderRadius:2,padding:2,marginLeft:6,borderColor:'#DB3843',borderWidth:1,marginRight:4}}>
                            <Text style={{color:'#DB3843',fontSize:11,}}>{item.tag}</Text>
                        </View>
                        <Heading1>{item.title}</Heading1>
                        {/*<View*/}
                        {/*style={{backgroundColor:'#835110',width:45,height:15,justifyContent:'center',alignItems:'center',flexDirection:'row',}}>*/}
                        {/*<View*/}
                        {/*style={{backgroundColor:'white',borderRadius:2,justifyContent:'center',alignItems:'center',height:12,flexDirection:'row',paddingLeft:5,paddingRight:5,paddingBottom:2,paddingTop:2}}>*/}
                        {/*<Text style={{color:'rgba(0,0,0,0.7)',fontSize:11,}}>{item.subject.charAt(0)}</Text>*/}
                        {/*</View>*/}
                        {/*<Text style={{fontSize:11,color:'white',marginLeft:4,}}>{item.tag.charAt(0)}</Text>*/}
                        {/*</View>*/}
                    </View>
                    <View style={styles.space}>
                        <Image style={{width:12,height:12}}
                               source={require('../../../res/img/select/select_time.png') }/>
                        <Heading3 style={{marginLeft:7}}>{start_time}到{end_time}</Heading3>
                    </View>
                    <View style={styles.other}>
                        <Image style={{width:28,height:28,borderRadius:14}} source={{uri:master_teacher.img}}/>
                        <View style={styles.name}>
                            <Tip>讲师</Tip>
                            <Tip2>{master_teacher.name}</Tip2>
                        </View>
                        <View style={styles.secondImg}>
                            <Image style={{width:28,height:28,borderRadius:14}} source={{uri:tutor_teacher.img}}/>
                            <View style={styles.name}>
                                <Tip>辅导</Tip>
                                <Tip2>{tutor_teacher.name}</Tip2>
                            </View>
                        </View>
                    </View>
                    <View style={styles.separatorLine}/>
                    <View style={styles.teacher}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Text style={styles.ming_e}>{show_txt}</Text>
                            <Text style={styles.ming_e_show}>{showText}</Text>
                            <Text style={styles.ming_e}>{ren}</Text>
                        </View>
                        <View style={{flex:1}}/>

                        {mMount > mPrice ?
                            <View style={{flexDirection:'row',alignItems:'center',marginRight:10}}>
                                <View
                                    style={{flexDirection:'row',alignItems:'center',position:'absolute',justifyContent:"center"}}
                                    onLayout={({nativeEvent:e})=>this.layout(e)}>
                                    <Text style={{color:'#999999',fontSize:10}}>原价</Text>
                                    <Image style={{width:4,height:5,marginTop:4,marginLeft:2,marginRight:2}}
                                           source={require('../../../res/img/order/order_bi.png')}/>
                                    <Text style={{color:'#999999',fontSize:12}}>{item.amount}</Text>
                                </View>
                                <View
                                    style={{width:40,height:1,backgroundColor:'#555555',alignItems:'center',}}/>
                            </View> : <View/>}
                    </View>
                    <View style={{marginTop:6,flexDirection:'row',alignItems:'center'}}>
                        <Text style={{color:'#333333',fontSize:11,}}>距离</Text>
                        <Text style={{color:'#db3843',fontSize:14}}>7.5</Text>
                        <Text style={{color:'#333333',fontSize:11,}}>折</Text>
                        <SelectRebateCountDown
                            // date={new Date()}
                            style={{marginTop:4}}
                            date="2018-07-11 12:00:00"
                            daysStyle={styles.reabte_text}
                            hoursStyle={styles.reabte_text}
                            minsStyle={styles.reabte_text}
                            secsStyle={styles.reabte_text}
                            // firstColonStyle={styles.colon}
                            // secondColonStyle={styles.colon}
                        />
                        <View style={{flex:1}}/>
                        <View style={{flexDirection:'row',marginRight:10,alignItems:'center'}}>
                            <Image style={{width:6,height:7,marginTop:7}}
                                   source={require('../../../res/img/select/select_price.png')}/>
                            <Text style={styles.price2}>{item.price}</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    goToGoodDetail(item) {
        this.props.navigation.navigate('CourseDetailScene', {type: 0, info: item})
    }

    goToCommonDetail(item) {
        this.props.navigation.navigate('CourseDetailScene', {type: 1, info: item})
    }

    /**
     * 公开课列表Item
     * @param rowData
     * @returns {XML}
     */
    renderTagItem = (rowData: any) => {
        let item = rowData.item;

        let start_time = item.start_date.substr(5, 5).replace('-', '月') + '日'
        // let end_time = item.end_date.substr(5, 5).replace('-', '月') + '日'

        var showText = ''
        var show_txt = ''
        if (item.buys >= item.totals * 0.8 && item.buys < item.totals) {
            showText = item.remains + '人'
            show_txt = '仅剩名额'
        } else if (item.buys >= item.totals) {
            show_txt = ''
            showText = '已报满'
        } else {
            showText = item.buys + '人'
            show_txt = '已报名额'
        }

        return (
            <View style={styles.card}>
                <TouchableOpacity onPress={()=>this.goToCommonDetail(item)}>
                    <View style={{flex:1}}>
                        <Image source={{uri:item.image}}
                               style={styles.course_image}/>
                        <View style={styles.course_free_view}>
                            <Text style={styles.course_free_text}>免费</Text>
                        </View>
                    </View>
                    <Text numberOfLines={1} style={styles.course_title}>{item.title}</Text>
                    <View style={styles.course_teacher_contain}>
                        <Image style={styles.course_teacher_avatar}
                               source={{uri:item.teacher_image}}/>
                        <Text style={styles.course_teacher_name}>{item.teacher}</Text>
                        <View style={{flex:1}}/>
                        <Text style={{color:'#333333',fontSize:9,marginRight:10}}>{show_txt}</Text>
                    </View>
                    <View style={styles.course_teacher_contain}>
                        <Image style={styles.course_time_icon}
                               source={require('../../../res/img/select/select_time.png')}/>
                        <Text style={styles.course_time_text}>{start_time}</Text>
                        <View style={{flex:1}}/>
                        <Text style={{color:'rgba(219, 56, 67, 1)',fontSize:13,marginRight:10}}>{showText}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }

    /**
     * 渲染TAB头部
     * @returns {XML}
     * @private
     */
    _renderSectionHeader() {
        return <DetailTopTabBar
            activeTab={this.state.top_index}
            tabNames={['老师主页','在售课程']} tabs={['老师主页','在售课程']}
            goToPage={(i)=>this.setCurrenTab(i)}
        />
    }

    /**
     * 切换标签
     * @param i
     */
    setCurrenTab(i) {
        this.setState({top_index: i})

        if (i == 0) {
            this.sectionList.scrollToLocation(
                {
                    sectionIndex: 0,
                    itemIndex: 0,
                    viewOffset: 20
                }
            );
        } else if (i == 1) {
            this.sectionList.scrollToLocation(
                {
                    sectionIndex: 0,
                    itemIndex: 1,
                    viewOffset: 59
                }
            );
        }

    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    reabte_text: {
        color: '#db3843',
        fontSize: 14,
    },
    rowinfo: {
        flexDirection: 'row',
        marginTop: 15,
        marginRight: 21
    },
    rowTitle: {
        fontSize: 14,
        color: 'rgba(0,0,0,0.7)',
        marginLeft: 12,
        marginBottom:6
    },
    rowContentLeft: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.5)',
        marginLeft: 12
    },
    rowContentLeft2: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.5)',
        marginLeft: 12,
        marginTop: 15,
        marginBottom: 10
    },
    rowContentLeft3: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.5)',
        marginLeft: 12,
        marginBottom: 10,
    },
    rowContentRight: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.5)',
        marginLeft: 20,
        marginRight: 53,
    },
    rowContentCommentRight: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.5)',
        marginLeft: 12,
        lineHeight: 20,
        marginTop: -6,

    },
    card: {
        height: 190,
        width: (width - 36) / 2,
        borderColor: '#e7e7e7',
        borderWidth: 0.5,
        borderRadius: 5,
        shadowColor: '#e7e7e7',
        elevation: 1,
        marginLeft: 12,
        marginBottom: 6

    },
    course_image: {
        height: 100,
        width: (width - 36) / 2,
        resizeMode: 'cover',
        borderRadius: 6,
        position: 'absolute',
    },
    course_free_view: {
        position: 'relative',
        marginLeft: 12,
        width: 39,
        height: 16,
        backgroundColor: 'black',
        justifyContent: 'center',
        alignItems: 'center',
    },
    course_free_text: {
        color: 'white',
        fontSize: 10,
    },
    course_title: {
        color: 'rgba(0,0,0,0.8)',
        fontSize: 14,
        marginLeft: 12,
        marginTop: 115,
        fontWeight: 'bold',
        marginRight: 12,
    },
    course_teacher_contain: {
        alignItems: 'center',
        flexDirection: 'row',
        marginTop: 10,
    },
    course_teacher_avatar: {
        height: 18,
        width: 18,
        resizeMode: 'cover',
        marginLeft: 12,
        borderRadius: 9,
    },
    course_teacher_name: {
        color: 'rgba(0,0,0,0.5)',
        fontWeight: 'bold',
        fontSize: 11,
        marginLeft: 5,
    },
    course_time_icon: {
        height: 10,
        width: 10,
        resizeMode: 'cover',
        marginLeft: 12,
    },
    course_time_text: {
        color: 'rgba(0,0,0,0.3)',
        fontSize: 9,
        marginLeft: 3,
    },
    course_bo_fang_Button: {
        width: 39,
        height: 15,
        marginRight: 12,
    },
    cell_container: {
        backgroundColor: 'white',
        margin: 12,
        marginVertical: 3,
        borderColor: '#e7e7e7',
        borderWidth: 0.5,
        borderRadius: 5,
        shadowColor: '#e7e7e7',
        shadowOffset: {width: 0.5, height: 0.5},
        shadowOpacity: 0.4,
        shadowRadius: 10,
        elevation: 1,
        padding: 15
    },
    separatorLine: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.1)',
        height: 1,
        marginTop: 15,
        marginBottom: 15
    },
    secondImg: {
        marginLeft: 30,
        flexDirection: 'row',
        alignItems: 'center'
    },
    teacher: {
        justifyContent: 'space-between',
        flexDirection: 'row',
        alignItems: 'center',
    },
    name: {
        marginLeft: 12,
        flexDirection: 'column',
    },
    space: {
        marginTop: 15,
        alignItems: 'center',
        flexDirection: 'row',
    },
    space2: {
        marginTop: 8,
        flexDirection: 'row',
        marginLeft: 30,
        alignItems: 'center'
    },
    other: {
        marginTop: 15,
        flexDirection: 'row',
        alignItems: 'center',
    },
    icon: {
        width: 28,
        height: 28,
        borderRadius: 14,
    },
    price_icon: {
        color: '#DB3843',
    },
    price: {
        color: '#DB3843',
        marginRight: 15,
    },
    price2: {
        color: 'rgba(197, 50, 60, 1)',
        fontSize: 19,
        fontWeight: '700',
        marginLeft: 6,
    },
    ming_e: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.7)',
        fontWeight: '200',
    },
    ming_e_show: {
        fontSize: 14,
        color: '#db3843',
        fontWeight: 'bold',
    },
});
